<template>
  <div>
    <el-form
      slot:default
      :model="form"
      :rules="rules"
      label-width="100px"
      ref="form"
      class="kylin-form"
    >
      <el-form-item :label="$t('user.user_name')" prop="name">
        <el-input
          v-model="form.name"
          autocomplete="off"
          :disabled="true"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('user.user_type')" prop="type">
        <el-select v-model="form.type" class="size">
          <el-option
            v-for="item in userTypes"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('user.enable_status')" prop="status">
        <el-radio v-model="form.status" :label="true">{{
          $t("user.normal")
        }}</el-radio>
        <el-radio v-model="form.status" :label="false">{{
          $t("user.locking")
        }}</el-radio>
      </el-form-item>
      <el-form-item :label="$t('user.department')" prop="department">
        <el-select v-model="form.department" class="size">
          <el-option
            v-for="item in departments"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('user.user_role')" prop="role">
        <el-select v-model="form.role" class="size" multiple clearable>
          <el-option
            v-for="item in roles"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('user.email')" prop="email">
        <el-input v-model="form.email" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">{{ $t("cancel") }}</el-button>
      <el-button class="kylin-button" @click="handleOk">{{
        $t("confirm")
      }}</el-button>
    </div>
  </div>
</template>

<script>
import { getDepartments, updateUser, getUser } from "@/api/user";
import { getRoles } from "@/api/role";
export default {
  props: {
    rowId: {
      type: Number | String,
      default: "",
    },
  },
  data() {
    let checkName = (rule, value, callback) => {
      let reg = /[\\|\（|\\|\/|:|\*|?|\"|\<|\>|\||\）]/;
      if (!value) {
        return callback(new Error(this.$t("user.user_name_require")));
      } else if (reg.test(value)) {
        return callback(
          new Error(this.$t("user.user_name_content_error") + '（/:*?"<>|）')
        );
      } else {
        return callback();
      }
    };
    let checkEmail = (rule, value, callback) => {
      if (!value) {
        return callback();
      }
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      if (mailReg.test(value)) {
        return callback();
      } else {
        return callback(new Error(this.$t("user.email_format_error")));
      }
    };
    return {
      userTypes: [
        {
          id: 0,
          name: "基地管理员",
        },
        {
          id: 1,
          name: "部门管理员",
        },
        {
          id: 2,
          name: "普通用户",
        },
      ],
      departments: [],
      roles: [],
      form: {
        name: "",
        type: "",
        status: true,
        department: "",
        role: [],
        email: "",
      },
      rules: {
        name: [
          {
            required: true,
            validator: checkName,
            trigger: "change",
          },
        ],
        type: [
          {
            required: true,
            message: this.$t("user.user_type_require"),
            trigger: "change",
          },
        ],
        status: [
          {
            required: true,
            message: this.$t("user.user_status_require"),
            trigger: "change",
          },
        ],
        department: [
          {
            required: true,
            message: this.$t("user.user_department_require"),
            trigger: "change",
          },
        ],
        role: [
          {
            required: true,
            message: this.$t("user.user_role_require"),
            trigger: "change",
          },
        ],
        email: [
          {
            validator: checkEmail,
            trigger: "change",
          },
        ],
      },
    };
  },
  mounted() {
    getDepartments().then((res) => {
      if (res.data.code === "0") {
        this.departments = res.data.data;
      } else {
        this.$message({
          type: "error",
          message: res.data.message,
        });
      }
    });
    getRoles({ paged: false }).then((res) => {
      if (res.data.code === "0") {
        this.roles = res.data.data.results;
      } else {
        this.$message({
          type: "error",
          message: res.data.message,
        });
      }
    });
    getUser({ id: this.rowId }).then((res) => {
      if (res.data.code === "0") {
        let data = res.data.data;
        this.form.name = data.username;
        this.form.type = data.type;
        this.form.status = data.active;
        this.form.email = data.mail;
        this.form.department = data.departmentId;
        this.form.role = data.roleId;
      } else {
        this.$message({
          type: "error",
          message: res.data.message,
        });
      }
    });
  },
  methods: {
    handleCancel() {
      this.$refs.form.resetFields();
      this.$emit("click");
    },
    handleOk() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let data = {
            id: this.rowId,
            username: this.form.name,
            mail: this.form.email,
            type: this.form.type,
            active: this.form.status,
            roleId: this.form.role,
            departmentId: this.form.department,
          };
          updateUser(data).then((res) => {
            if (res.data.code === "0") {
              this.$message({
                type: "success",
                message: res.data.message,
              });
              this.$emit("click", "success");
              this.$refs.form.resetFields();
            } else {
              this.$message({
                type: "error",
                message: res.data.message,
              });
            }
          });
        }
      });
    },
  },
};
</script>